
function renderEmojiImage(elemNode, children, editor) {
    const { src, alt = '', style = {} } = elemNode;
    const { width = '', height = '' } = style
    const selected = DomEditor.isNodeSelected(editor, elemNode) // 图片是否选中
    
    const imageStyle = {
      width,
      height,
      backgroundImage:`url("${src}")`,
      backgroundRepeat:'no-repeat',
      backgroundSize:"100% 100%"
    }
    // if (width) imageStyle.width = '100%'
    // if (height) imageStyle.height = '100%'
    // 【注意】void node 中，renderElem 不用处理 children 。core 会统一处理。
    const vnode = h(
      `span`,
      {
        props:{  contentEditable: false },
        style:{...imageStyle} 
      },
      ""
    )
    const containerId = genContainerId(editor, elemNode)
    const isDisabled = editor.isDisabled()

    // if (selected && !isDisabled) {
    //   // 选中，未禁用 - 渲染 resize container
    //   return renderResizeContainer(editor, elemNode, vnode, { width, height })
    // }

    // 其他，渲染普通 image container
    return h(
      "span",
      {
          props: { id: containerId, contentEditable: true, className: "w-e-emoji-container w-e-selected-image-container", }, // HTML 属性，驼峰式写法
          style: {...imageStyle, overflow: "inherit"}, // style ，驼峰式写法
      },
      children
  )
}

function parseEmojiHtml(elem, children, editor){
    const $elem = $(elem)
    let href = $elem.attr('data-href') || ''
    // href = decodeURIComponent(href) // 兼容 V4
    return {
      type: 'emoji',
      src: $elem.attr('src') || '',
      alt: $elem.attr('alt') || '',
      href,
      style: {
        width: getStyleValue($elem, 'width'),
        height: getStyleValue($elem, 'height'),
      },
      children: [{ text: '' }], // void node 有一个空白 text
    }
  }
  function emojiToHtml(elemNode, childrenHtml) {
    const { src, alt = '', style = {} } = elemNode
    const { width = '', height = '' } = style
    let styleStr = ''
    if (width) styleStr += `width: ${width};`
    if (height) styleStr += `height: ${height};`
    return `<img data-w-e-type="emoji" class="w-e-emoji-container" src="${src}" alt="${alt}"  style="${styleStr}"/>`
}
const renderEmojiConf = {
    type: 'emoji', // 和 elemNode.type 一致
    renderElem: renderEmojiImage,
}
const parseEmojiHtmlConf = {
    selector: 'img[data-w-e-type="emoji"]', // data-w-e-type 属性，留给自定义元素，保证扩展性
    parseElemHtml: parseEmojiHtml,
  }
const emojiToHtmlConf = {
    type: 'emoji',
    elemToHtml: emojiToHtml,
}